import { watch, computed, ref, reactive } from 'vue';
import { defineStore } from 'pinia';

export const useAppStore = defineStore('app', () => {
    const todos = reactive([
        {
            id: '1',
            finished: true,
            content: 'coding'
        },
        {
            id: '2',
            finished: false,
            content: 'eating'
        },
    ])

    watch(todos, newTodos => {
        console.log(newTodos, 'newTodos')
    })

    const finishedTodos = computed(() => {
        console.log('computed')
        return todos.filter(todo => todo.finished).map(todo => todo.content)
    })

    const personData = ref([])
    function updatePersonData(d) {
        personData.value = d
    }

    const deptData = ref([])
    function updateDeptData(d) {
        deptData.value = d
    }

    const areaData = ref([])
    function updateAreaData(d) {
        areaData.value = d
    }

    const groupData = ref([])
    function updateGroupData(d) {
        groupData.value = d
    }

    return {
        todos,
        areaData,
        updateAreaData,
        deptData,
        updateDeptData,
        groupData,
        updateGroupData,
        personData,
        updatePersonData,
        finishedTodos
    }
});

export default useAppStore;